<template>
  <div class="search_wrapper" style="margin-right: 10px">
    <div class="search_inner">
      <div class="feature_select_wrapper" style="margin: 0 auto;padding: 15px;">
        <el-select size="medium" class="feature_select" style="max-width: 550px;width: 100%"
                   v-model="features" multiple filterable allow-create default-first-option placeholder="请选择系统特征">
          <el-option v-for="(item, index) in options" :key="index" :label="item" :value="item">
          </el-option>
        </el-select>
      </div>

      <div class="search" style="display:flex;margin: 0 auto;max-width: 600px;padding-left: 5px;">
        <el-input class="mul_input" placeholder="请输入特征" v-model="input_feature" clearable style="margin: 0 10px"></el-input>
        <el-button icon="el-icon-plus" circle @click="addMyFeature"></el-button>
      </div>
      <div class="select_wrapper mul_select_wrapper">
        <div style="margin: 10px 10px;line-height: 40px;font-weight: bold;color: #409eff">个性选择:</div>
        <el-select v-model="cmd_value" placeholder="请选择">
          <el-option v-for="(item, index) in option_cmd" :key="index" :value="item"></el-option>
        </el-select>
        <el-select v-model="imp_value" placeholder="请选择">
          <el-option v-for="(item, index) in option_imp" :key="index" :value="item"></el-option>
        </el-select>
      </div>
      <div class="search" style="display:flex;margin: 0 auto;max-width: 600px;padding-left: 5px;">
        <el-input class="see_input" placeholder="请输入单词" v-model="searchword_input" clearable style="margin: 0 10px"></el-input>
        <el-button icon="el-icon-search" circle @click="findWords"></el-button>
      </div>
    </div>
  </div>
</template>

<script>
  import {strsutils} from "../../utils/strutils";
  import {postRequest} from "../../utils/api";
  let baseurl = strsutils.baseurl
  export default {
      name: "MulSearchInput",
      data(){
        return {
          features: [],
          options: strsutils.sys_features,
          input_feature: '',
          cmd_value: '全部',
          imp_value: '全部',
          // option_cmd: strsutils.cmds,
          // option_imp: strsutils.imps,
          searchword_input: ''
        }
      },
      computed: {
        option_cmd(){
          let cmds = []
          strsutils.cmds.forEach((value, index)=>{
            cmds.push(value)
          })
          cmds.push('全部')
          return cmds
        },
        option_imp(){
          let imps = []
          strsutils.imps.forEach((value, index)=>{
            imps.push(value)
          })
          imps.push('全部')
          return imps
        }
      },
      methods: {
        addMyFeature(){
          if(this.input_feature!=''){
            console.debug(this.features)
            for (let i = 0;i < this.features.length;i++){
              var item = this.features[i]
              if(item == this.input_feature){
                return
              }
            }
            this.features.push(this.input_feature)
          }
        },
        findWords(){
          let _this = this
          let param = {
            userid: window.localStorage.getItem('userid'),
            word: this.searchword_input,
            feature_strs: this.features,
            cmd: this.cmd_value,
            imp: this.imp_value
          }
          const loading = this.$loading({
            lock: true,
            text: 'Loading',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          });
          postRequest(baseurl+'/findWordByCondition', param).then(function (res) {
            _this.$message.success("查询words成功")
            // console.debug("查询得到的words："+JSON.stringify(res.data))
            _this.$store.commit("setMyReviewFindWordList", res.data)
            _this.$store.commit("setMyReview_Refresh_true")
            setTimeout(()=>{loading.close()}, 500)

          }).catch(function (err) {
            _this.$message.error("查询words出错")
            loading.close()
            console.debug("查询words出错"+err)
          })
        }
      }
    }
</script>

<style>
  /*.mul_input .el-input__inner{ border-radius: 50px;}*/
  .mul_select_wrapper .el-select{width: 30%;margin: 10px 10px}
</style>

<style scoped>
  .search_inner div{display: flex;max-width: 600px;}
  .select_wrapper{
    max-width: 800px;
  }
  .select_wrapper{margin: 0 auto}
  .select_wrapper el-select{
    width: 30%;margin: 0 30px;
  }
</style>
